// 用户数据
<template>
  <div style="width:100%;height:100%;background-color:#3b4551;text-align: center;">
    <div style="width:50%;margin:auto;min-width:950px">
      <el-page-header id="page" @back='()=>{$router.push("/admin/"+type)}' content="用户数据" style="color:#ffffff;padding-top:10px"></el-page-header>
      <el-table
        id="userdata"
        :data="data.captcha"
        style="width: 100%;margin-top:50px">
        <el-table-column
          label="ID"
          width="180"
          id="id"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="安全码"
          width="180"
          id="anqm"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.code }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="名称"
          width="180"
          name='name'
          >
          <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="创建时间"
          width="180"
          id="time"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.create_time }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" id="cz">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="update(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="delectM(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>




    <!-- 悬浮窗部分 -->
    <el-dialog
        :visible.sync="dialogVisible"
        width="600px"
        title="编辑"
        :before-close="()=>{dialogVisible=false}" :show-close='false'
        id="option">
        <div id="option_2" style="min-width:560px;width:560px;overflow:hidden">
            <div id="option_3" style="width:575px;height:400px;overflow:auto">
                <div id="urlname">
                    <p style="display:block;">网站名称</p>
                    <el-input id="title" v-model="temporary.title" placeholder="网站名称" style="width:400px;"></el-input>
                </div>

                <div id="aqm">
                    <p for="" style="display:block;">安全码</p>
                    <el-input v-model="temporary.code" placeholder="安全码" style="width:300px;"></el-input>
                    <el-button style="">随机生成</el-button>
                    <p for="" style="margin:0">安全码5到6个字符</p>
                </div>

                <p for="">公告</p>
                <div id="notice">
                    <p for="">公告内容</p>
                    <el-input placeholder="公告内容" style="width:300px;"></el-input>
                </div>

                <div id="url" style="display:flex;justify-content:space-between;">
                    <p style="display:inline-block">端口名称/网址</p>
                    <el-button @click="addOption(temporary.option)" style="margin-right:50px" type="success" icon="el-icon-plus" circle></el-button>
                </div>
                <div id="option_4">
                    <el-table
                        id="option_5"
                        :data="temporary.option"
                        style="width: 100%">
                        <el-table-column
                        label="端口名称"
                        width="150">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.port" placeholder="端口" style="width:100px;"></el-input>
                        </template>
                        </el-table-column>
                        <el-table-column
                        label="网址"
                        width="300">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.url" placeholder="网址" style="width:250px;"></el-input>
                        </template>
                        </el-table-column>
                        <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                            size="mini"
                            type="danger"
                            @click="delectOption(scope.$index,temporary.option)">删除</el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <span slot="footer" id="tips" class="dialog-footer">
            <el-button size="mini" @click="dialogVisible = false;cancel()">取 消</el-button>
            <el-button size="mini" type="primary" @click="dialogVisible = false;enter()">确 定</el-button>
        </span>
    </el-dialog>



  </div>
</template>


<script>
export default {
  data(){
    return{
      type:'',
      user:{},
      data:{},
      datas:{},
      //悬浮窗显示
      dialogVisible:false,
      //悬浮窗中的数据
      temporary:{},
      //删除的选项
      dele:[],
    }
  },
  methods:{
    //获取用户数据
    getUser_data(user_id){
      this.$axios.post(this.$API.USERDATA,{
        userId:user_id
      }).then(res=>{
        if(res.code==200){
          this.data = res.data;
          //副本
          this.datas = this.$fun.copy(this.data);
          console.log(res);
        }
      });
    },
    //编辑
    update(index,row){
      this.temporary = row;
      //显示悬浮窗
      this.dialogVisible = true;
    },
    //删除
    delectOption(index,row){
      this.dele.push(row[index].id);
      // console.log(row[index].id);
      row.splice(index,1);
    },
    //添加选项
    addOption(option){
      option.push({captcha_id: '', url: "", port: ""});
    },
    //取消
    cancel(){
      this.data = this.$fun.copy(this.datas);
      this.dele = [];
    },
    //确定
    enter(){
      //调用修改接口
      this.$axios.post(this.$API.ADMINUSERUPDATEM,{
        delect:this.dele,
        user_id:this.user.id,
        captcha:this.temporary,
      }).then(res=>{
        if(res.code==200){
          this.$message({
            message: '提交成功',
            type: 'success'
          });
          this.datas = this.$fun.copy(this.data);
          this.dele=[];
        }else{
          this.$message.error('提交失败');
        }
      });
    },
    //删除安全码
    delectM(index,row){
      console.log(row.id);
      //调用接口
      this.$axios.post(this.$API.ADMINUSERDELECTM,{
        captcha_id:row.id,
      }).then(res=>{
        if(res.code==200){
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.data.splice(index,1);
          this.datas.splice(index,1);
        }else{
          this.$message.error('删除失败');
        }
      });




    },

  },
  created(){
    this.user.id =  this.$route.params.userId;
    //获取资源
    this.getUser_data(this.user.id);
    this.type = this.$route.params.type;
    if(this.type=='login'){
      this.type = 'log/login';
    }else if(this.type=='register'){
      this.type = 'log/register';
    }else{
      this.type = 'user_list';
    }
  }

}
</script>


<style scoped>
#page >>> div.el-page-header__content{
    color:#ffffff !important;
  }

  #userdata{
    border-radius: 5px;
  }


  
/* 悬浮框编辑部分的样式 */
#option >>> div.el-dialog__header{
    background-color: #e5e6e5;
    text-align: left;
}
/* 悬浮窗整体的样式，圆角之类的 */
#option >>> div{
    border-radius: 10px;
    text-align: left;
}
#aqm > p:nth-child(1),#urlname > p,#notice > p,#aqm > p:nth-child(4){
    margin-top: 20px;
    font-size: 12px;
    color: #b4b2b5;
}

/* 公告，端口提示 */
#option_3 > p,#url > p{
    margin-top: 20px;
}


/* 悬浮窗的主体 */
#option >>> div.el-dialog__body{
    padding-top: 0;
    padding-bottom: 5px;
}

/* 悬浮窗底部 */
#option >>> div.el-dialog__footer{
    padding-bottom: 10px;
    text-align: right;
}

#userdata >>> div.el-table__header-wrapper{
  margin-left:10px
}
#userdata >>> div.el-table__body-wrapper.is-scrolling-none{
  margin-left:10px
}

</style>